<template>
  <div>
    <el-drawer
      title="副卡详情"
      :before-close="handleClose"
      :visible.sync="childCardDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="50%"

    >
      <div class="demo-drawer__content "       style="overflow: scroll;">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="90px"
          class="globalSerchFormStyle"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="用户手机号" prop="mobilePhone" size="small">
                <el-input
                  style="width: 170px"
                  v-model="queryParams.mobilePhone"
                  placeholder="请输入用户手机号"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row
          class="global_el_rowStyle"
          :gutter="10"
          style="
            border-top: none;
            border-bottom: 1px solid #f5f5f5;
            margin-top: 0px;
          "
        >
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
              size="mini"
              >搜索</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              @click="resetQuery"
              size="mini"
              icon="el-icon-refresh"
              plain
              >重置</el-button
            >
          </el-col>
        </el-row>
        <el-table :data="list" v-loading="loading">
          <el-table-column property="customerName" label="副卡用户名称"></el-table-column>
          <el-table-column property="mobilePhone" label="副卡用户手机号"></el-table-column>
          <el-table-column property="gasolineCardAmt" label="汽油副卡账户">
            <template slot-scope="{ row }">
              {{ row.gasolineCardAmt ? row.gasolineCardAmt : 0 }}
            </template>
          </el-table-column>
          <el-table-column property="dieselCardAmt" label="柴油副卡账户">
            <template slot-scope="{ row }">
              {{ row.dieselCardAmt ? row.dieselCardAmt: 0 }}
            </template>
          </el-table-column>
          <el-table-column property="lngCardAmt" label="LNG副卡账户">
            <template slot-scope="{ row }">
              {{ row.lngCardAmt ?  row.lngCardAmt: 0 }}
            </template>
          </el-table-column>
          <el-table-column property="cngCardAmt" label="CNG副卡账户">
            <template slot-scope="{ row }">
              {{ row.cngCardAmt ? row.cngCardAmt: 0 }}
            </template>
          </el-table-column>
          <el-table-column property="currencyCardAmt" label="通用副卡账户">
            <template slot-scope="{ row }">
              {{ row.currencyCardAmt ? row.currencyCardAmt: 0 }}
            </template>
          </el-table-column>

          <el-table-column fixed="right" prop="" label="操作" width="100">
            <template slot-scope="{ row }">
              <el-button type="text" @click="gotoRecycle(row)"
                >一键回收</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="page.pageNum"
          :limit.sync="page.pageSize"
          @pagination="getList"
        />
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getChildCard,handleRecycle } from "@/api/customer/dzk_Electroic_Card";
export default {
  name: "DzkElectroicCardChildList",
  props: {
    childCardDialog: {
      type: Boolean,
      default: false,
    },
    currentRowData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      formLabelWidth: "80px",
      list: [],
      total: 0,
      queryParams: {
        mainIdList: [],
        mobilePhone: "",
      },
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
    };
  },
  watch: {
    childCardDialog(val) {
      if (val) {
        this.getList();
      }
    },
  },
  methods: {
    async gotoRecycle(row) {
      await this.$confirm(`确定回收手机号为${ row.mobilePhone }用户副卡的所有余额 ？`, "回收副卡余额", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      const res = await handleRecycle({id:row.id})
      this.$message.success(res.msg)
      this.getList()
    },
    // 搜索
    handleQuery() {
      this.getList();
    },
    // 重置
    resetQuery() {
      this.queryParams.mobilePhone = "";
      this.getList();
    },

    // 获取充值明细
    async getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      params.mainIdList = this.currentRowData.idList;
      try {
        const res = await getChildCard(this.page,params);
        this.total = res.total;
        this.list = res.rows;
      }finally {
        this.loading = false;
      }

    },
    handleClose() {
      this.queryParams.mobilePhone = "";
      this.$emit("update:childCardDialog", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.demo-drawer__content {
  padding: 0 1rem;
  box-sizing: border-box;
}
</style>
